<template>
	<view class="">
		<!-- 顶部导航 -->
		<fa-navbar title="文章详情"></fa-navbar>
		<view class="u-p-30 detail">
			<view class="tags" v-if="detail.tags">
				<u-tag
					v-for="(item, index) in detail.tags"
					:key="index"
					:text="item.name"
					:bg-color="theme.lightColor"
					:border-color="theme.faBorderColor"
					:color="theme.bgColor"
					class="u-m-r-10"
					mode="light"
					@click="navigateTag(item.id, 'article')"
				/>
			</view>
			<view class="title u-m-t-20 u-font-40" :style="[underline]"><text :style="[style]" v-text="detail.title"></text></view>

			<view class="time u-m-t-20 u-m-b-20 u-flex" v-if="detail.create_text" @click="goUser(detail.user && detail.user.id)">
				<u-avatar size="40" :src="detail.user && detail.user.avatar"></u-avatar>
				<view class="u-p-l-15" v-text="detail.user && detail.user.nickname"></view>
				<view class="u-p-l-15">
					发布于
					<text v-text="detail.create_text"></text>
				</view>
			</view>

			<view class="content_fmt">
				<u-parse
					:html="detail.content_fmt"
					:tag-style="vuex_parse_style"
					:domain="vuex_config.upload ? vuex_config.upload.cdnurl : ''"
					@linkpress="navigate"
				></u-parse>
			</view>

			<view class="u-p-30 u-text-center" v-if="detail.paid_status == 'unpaid' && detail.is_paid_part_of_content == 0">
				<u-button
					hover-class="none"
					size="medium"
					type="primary"
					:custom-style="{ backgroundColor: btnBgColor(true), color: btnColor(true), border: '1px solid ' + theme.faBorderColor }"
					@click="articlePay"
				>
					付费查看
				</u-button>
			</view>
			<!--  -->
			<view class="u-flex u-m-t-50 u-text-center">
				<view class="u-m-r-10">
					<u-button
						hover-class="none"
						type="primary"
						:custom-style="{
							backgroundColor: btnBgColor(detail.vote, 'up'),
							color: btnColor(detail.vote, 'up'),
							border: '1px solid ' + theme.faBorderColor
						}"
						size="mini"
						@click="clickArticle"
					>
						<text v-text="detail.voteup"></text>
						人点赞
					</u-button>
				</view>
				<u-button
					hover-class="none"
					type="primary"
					:custom-style="{ backgroundColor: btnBgColor(false), color: btnColor(false), border: '1px solid ' + theme.faBorderColor }"
					size="mini"
					@click="goToComment"
				>
					发表评论
				</u-button>
				<view class="u-flex-8 u-text-right u-p-r-15"><u-icon name="more-dot-fill" @click="moreClick" size="40"></u-icon></view>
			</view>
		</view>

		<view v-if="load_success">
			<!-- 提交评论 -->
			<view class="u-p-30">
				<view class="answer">
					<view class="answer-nav u-flex u-border-bottom">
						<view class="u-flex-5">
							<text v-text="detail.comments"></text>
							个评论
						</view>
						<view class="u-flex-7 u-text-right">
							<text class="u-m-r-20" :style="[styleColor('default')]" @click="orderClick('default')">默认排序</text>
							<text :style="[styleColor('date')]" @click="orderClick('date')">按发布时间排序</text>
						</view>
					</view>
					<view class="u-p-30 u-tips-color" v-if="!commentList.length">暂无评论，快来发表评论吧</view>
					<view v-else>
						<view class="comment u-border-bottom" v-for="(res, index) in commentList" :key="res.id">
							<view class="left" @click="goUser(res.user && res.user.id)"><image :src="res.user && res.user.avatar" mode="aspectFill"></image></view>
							<view class="right">
								<view class="top">
									<view class="name text-bold" @click="goUser(res.user && res.user.id)">{{ res.user && res.user.nickname }}</view>
									<view class="create_date">
										<view class="time">{{ res.create_date }}</view>
									</view>
								</view>
								<view class="content">
									<u-parse
										:html="res.content_fmt"
										:tag-style="vuex_parse_style"
										:domain="vuex_config.upload ? vuex_config.upload.cdnurl : ''"
										@linkpress="navigate"
									></u-parse>
								</view>
								<view class="bottom u-flex u-row-between">
									<!-- 评论操作条 -->
									<view
										class="u-flex bar-item"
										v-for="(item, ikey) in barList"
										:key="ikey"
										@click="barClick(ikey, index, res)"
										v-if="vuex_isAdmin && ikey != 2"
									>
										<u-icon :name="item.icon" :size="item.size"></u-icon>
										<view class="u-p-l-5">{{ !ikey ? res.voteup : item.text }}</view>
									</view>

									<view
										class="u-flex bar-item"
										v-for="(item, ikey) in barList"
										:key="ikey"
										@click="barClick(ikey, index, res)"
										v-if="!vuex_isAdmin && ikey != 3"
									>
										<u-icon :name="item.icon" :size="item.size"></u-icon>
										<view class="u-p-l-5">{{ !ikey ? res.voteup : item.text }}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="u-text-center u-p-30" :style="[{ color: theme.bgColor }]" v-if="has_more" @click="getCommentList">加载更多...</view>
					<!-- #ifdef MP-WEIXIN || APP-PLUS || H5 -->
					<fa-editor ref="faEditor"></fa-editor>
					<!-- #endif -->
					<!-- #ifdef MP-BAIDU || MP-ALIPAY -->
					<fa-markdown ref="faEditor"></fa-markdown>
					<!-- #endif -->
					<view class=""><fa-captchaparts ref="addcapt" label-position="left" :ident="id" mode="postcomment" v-model="captcha"></fa-captchaparts></view>
					<view class="u-p-30">
						<u-button
							hover-class="none"
							type="primary"
							v-if="vuex_token"
							:custom-style="{ backgroundColor: btnBgColor(true), color: btnColor(true) }"
							@click="goCommentPost"
						>
							提交评论
						</u-button>
						<u-button
							hover-class="none"
							type="primary"
							:custom-style="{ backgroundColor: btnBgColor(true), color: btnColor(true) }"
							v-else
							@click="goLogin"
						>
							去登录
						</u-button>
					</view>
				</view>
			</view>

			<!-- 操作条 -->
			<u-popup v-model="is_more" mode="bottom">
				<view>
					<u-grid class="u-p-t-30 u-p-b-30" :col="morelength" :border="false">
						<u-grid-item v-for="(item, index) in moreList" :key="index" @click="mainBar(index)">
							<block v-if="!index">
								<!-- #ifdef MP-WEIXIN || MP-BAIDU || MP-ALIPAY -->
								<button class="share-btn grid-text u-flex u-flex-wrap u-row-center" open-type="share">
									<u-icon :name="item.icon" :size="item.size"></u-icon>
									<view class="u-m-t-10" style="width: 100%;">分享</view>
								</button>
								<!-- #endif -->
								<!-- #ifdef APP-PLUS || H5 -->
								<button class="share-btn grid-text u-flex u-flex-wrap u-row-center">
									<u-icon :name="item.icon" :size="item.size"></u-icon>
									<view class="u-m-t-10" style="width: 100%;">分享</view>
								</button>
								<!-- #endif -->
							</block>
							<block v-else>
								<u-icon :name="item.icon" :size="item.size"></u-icon>
								<view class="grid-text u-m-t-15">{{ item.text }}</view>
							</block>
						</u-grid-item>
					</u-grid>
					<u-gap height="3" bg-color="#f4f6f8"></u-gap>
					<view class="u-p-30 u-text-center" @click="cancel">取消</view>
				</view>
			</u-popup>

			<!-- 评论操作条 -->
			<u-popup v-model="is_remark" mode="bottom">
				<view>
					<u-grid class="u-p-t-30 u-p-b-30" :col="3" :border="false">
						<u-grid-item v-for="(item, index) in remarkList" :key="index" @click="remarkBar(index)">
							<block>
								<u-icon :name="item.icon" :size="item.size"></u-icon>
								<view class="grid-text u-m-t-15">{{ item.text }}</view>
							</block>
						</u-grid-item>
					</u-grid>
					<u-gap height="3" bg-color="#f4f6f8"></u-gap>
					<view class="u-p-30 u-text-center" @click="cancelRemark">取消</view>
				</view>
			</u-popup>
			<!-- model -->
			<u-modal v-model="show" :content="content" :confirm-text="back_text" :show-cancel-button="showCancel" @confirm="confirm"></u-modal>
			<!-- 提示信息 -->
			<u-toast ref="uToast" />
			<!-- 感谢 -->
			<fa-thanks ref="faThank" :source_id="id" type="article"></fa-thanks>
			<!-- 举报 -->
			<fa-report ref="faReport" :source_id="jb_id" :type="jb_type"></fa-report>
			<!-- 更多配置 -->
			<fa-more-config ref="faMore" :styleObject="styleStr" :source_id="id" :flag="flag" @updateMore="getArticleShow" type="article"></fa-more-config>
			<!-- 编辑评论 -->
			<u-popup v-model="ed_show" mode="bottom" border-radius="5">
				<view class="sendMsg">
					<view class="header u-flex u-row-between u-p-l-30 u-p-r-30 u-p-t-20 u-p-b-20">
						<view class="">编辑评论</view>
						<u-icon name="close" @click="closemsg('ed_show')"></u-icon>
					</view>
					<view class="u-p-30">
						<scroll-view scroll-y="true" class="scroll-Y" style="height: 550rpx;">
							<!-- #ifdef MP-WEIXIN || APP-PLUS || H5 -->
							<fa-editor ref="faEditors" :html="edit_form.content"></fa-editor>
							<!-- #endif -->
							<!-- #ifdef MP-BAIDU || MP-ALIPAY -->
							<fa-markdown ref="faEditors" :markdown="edit_form.content"></fa-markdown>
							<!-- #endif -->
						</scroll-view>
					</view>
					<view class="u-border-top">
						<fa-captchaparts
							ref="editcapt"
							label-position="left"
							:ident="edit_form.id"
							:custom-style="{ padding: '0 30rpx 30rpx' }"
							mode="postcomment"
							v-model="edit_form.captcha"
						></fa-captchaparts>
					</view>
					<view class="u-text-center u-p-b-30">
						<u-button
							hover-class="none"
							type="primary"
							:custom-style="{ width: '80vw', backgroundColor: btnBgColor(true), color: btnColor(true) }"
							size="medium"
							@click="editConfirm"
						>
							提交保存
						</u-button>
					</view>
				</view>
			</u-popup>

			<!-- #ifdef APP-PLUS -->
			<view class="" v-if="detail.title">
				<fa-app-share ref="faShare" :title="detail.title" :summary="detail.title" :imageUrl="detail.image" :href="detail.fullurl"></fa-app-share>
			</view>
			<!-- #endif -->
			<fa-order-pay ref="orderPay" :money="detail.price" :source_id="detail.id" :score="detail.score" @successPay="successPay"></fa-order-pay>
		</view>
		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>

<script>
import { collection, vote, others, styleRest, tagClick } from '@/common/fa.mixin.js';
// #ifdef H5
import { weixinShare } from '@/common/fa.weixin.mixin.js';
// #endif
export default {
	mixins: [
		collection,
		vote,
		others,
		styleRest,
		tagClick,
		// #ifdef H5
		weixinShare
		// #endif
	],
	computed: {
		styleColor(type) {
			return type => {
				let color = this.order == type ? this.theme.bgColor : '#303133';
				let border = this.order == type ? '2px solid' + this.theme.bgColor : 'none';
				return { color: color, borderBottom: border, paddingBottom: '10rpx' };
			};
		},
		morelength() {
			return this.moreList.length <= 3 ? 3 : this.moreList.length <= 4 ? 4 : 5;
		}
	},
	onLoad(e) {
		let query = this.$Route.query || e || {};
		this.id = query.id || 0;		
	},
	onShow() {		
		this.page = 0;
		this.getArticleShow();
		this.getCommentList();
	},
	data() {
		return {
			load_success: false, //分段渲染
			id: 0,
			detail: {},
			style: {},
			styleStr: '',
			underline: {}, //下划线
			commentList: [],
			is_more: false,
			is_remark: false,
			show: false,
			showCancel: false,
			ed_show: false,
			config_show: false,
			content: '',
			flag: '',
			jb_id: 0,
			jb_type: '',
			barList: [
				{
					icon: 'thumb-up',
					text: '点赞',
					size: 25
				},
				{
					icon: 'chat',
					text: '回复',
					size: 25
				},
				{
					icon: 'warning-fill',
					text: '举报',
					size: 25
				},
				{
					icon: 'more-dot-fill',
					text: '',
					size: 28
				}
			],
			remarkList: [
				{
					icon: 'warning-fill',
					text: '举报',
					size: 50
				},
				{
					icon: 'edit-pen-fill',
					text: '编辑',
					size: 50
				},
				{
					icon: 'trash-fill',
					text: '删除',
					size: 50
				}
			],
			moreList: [
				{
					icon: 'share-fill',
					text: '分享',
					size: 50
				},
				{
					icon: 'bookmark-fill',
					text: '收藏',
					size: 45
				},
				{
					icon: 'heart-fill',
					text: '感谢',
					size: 45
				},
				{
					icon: 'warning-fill',
					text: '举报',
					size: 45
				}
			],
			page: 0,
			order: 'default',
			has_more: false,
			edit_form: {
				content: '',
				id: 0,
				index: 0
			},
			back_text: '',
			delete_form: {
				id: 0,
				index: 0,
				type: ''
			},
			remarkMoreData: {},
			remarkIndex: 0,
			is_update: false,
			captcha: ''
		};
	},
	methods: {
		goUser(id) {
			if (!id) return;
			this.$wanlshop.to(`/pages/community/user/index?user_id=${id}`)
		},
		articlePay() {
			this.$refs.orderPay.show();
		},
		//支付成功
		successPay() {
			this.getArticleShow();
		},
		//登录
		goLogin() {
			this.$wanlshop.to('/pages/user/auth/name');
		},
		//排序
		orderClick(order) {
			let o = this.$util.getDb('orders');
			if (o != '' && order == o) {
				return;
			}
			this.$util.setDb('orders', order, 3);
			this.order = order;
			this.page = 0;
			this.is_update = true;
			this.getCommentList();
		},
		//返回或删除
		confirm: async function() {
			if (this.back_text == '返回') {
				this.$Router.back(1);
			} else if (this.delete_form.type == 'comment') {
				//删除评论
				let res = await this.$api.goCommentDelete(this.delete_form);
				this.$u.toast(res.msg);
				if (!res.code) {
					return;
				}
				this.commentList.splice(this.remarkIndex, 1);
			} else {
				//删除文章
				let res = await this.$api.getArticleDelete(this.delete_form);
				this.$u.toast(res.msg);
				if (!res.code) {
					return;
				}
				//标记通知列表更新
				this.$u.vuex('vuex_delete_article', true);
				this.$Router.back(1);
			}
		},
		closemsg(type) {
			this[type] = false;
		},
		//编辑评论提交
		editConfirm: async function() {			
			this.edit_form.content = await this.$refs.faEditors.getData();
			let res = await this.$api.goCommentUpdate(this.edit_form);
			this.$u.toast(res.msg);
			if (!res.code) {
				this.$refs.editcapt.getCaptcha();
				return;
			}
			this.closemsg('ed_show');
			this.$set(this.commentList[this.remarkIndex], 'content_fmt', res.data.content_fmt);
		},
		//获取文章
		getArticleShow: async function(e) {			
			this.commentList = [];			
			let res = await this.$api.getArticleShow({
				id: this.id,
				order: this.order
			});
			console.log(res)
			if (!res.code) {
				this.$u.toast(res.msg);
				return;
			}
			if (res.data.zoneConditionList) {
				this.show = true;
				this.showCancel = false;
				this.back_text = '返回';
				let info = [];
				for (let i in res.data.zoneConditionList) {
					info.push(res.data.zoneConditionList[i]);
				}
				this.content = `此文章针对[${info.join('/')}]的用户开放`;
				return;
			}
			if ((this.vuex_isAdmin || this.vuex_user.id == res.data.article.user.id) && this.moreList.length <= 4) {
				this.moreList = this.moreList.concat([
					{
						icon: 'edit-pen-fill',
						text: '编辑',
						size: 50
					},
					{
						icon: 'trash-fill',
						text: '删除',
						size: 50
					},
					{
						icon: 'more-dot-fill',
						text: '更多',
						size: 50
					}
				]);
			}
			this.detail = res.data.article;
			// #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU
			this.$u.mpShare = {
				title: res.data.article.title
			};
			// #endif

			let result = this.getStyle(res.data.article.style);
			this.underline = result[0];
			this.style = result[1];			

			// #ifdef H5
			this.load_success = true;
			if (this.$util.isWeiXinBrowser()) {
				this.wxShare({
					title: this.detail.title,
					desc: this.detail.summary,
					link: window.location.href,
					img: this.detail.image
				});
			}
			// #endif
			// #ifndef H5
			setTimeout(() => {
				this.load_success = true;
			}, 100);
			// #endif
		},
		//发表评论
		goCommentPost: async function() {
			if (!this.id) {
				this.$refs.uToast.show({
					title: '参数错误！',
					type: 'error'
				});
				return;
			}
			let content = await this.$refs.faEditor.getData();
			let res = await this.$api.goCommentPost({
				id: this.id,
				type: 'article',
				content: content,
				captcha: this.captcha,
				subscribe: 1 //有人回复邮箱通知
			});
			this.$u.toast(res.msg);
			if (!res.code) {
				this.$refs.addcapt.getCaptcha();
				return;
			}
			this.commentList.push(res.data.comment);
			this.$refs.faEditor.setData('');
			this.captcha = '';
		},
		//更多评论列表
		getCommentList: async function() {
			this.has_more = false;
			let res = await this.$api.getCommentList({
				page: ++this.page,
				order: this.order,
				id: this.id,
				type: 'article'
			});
			if (!res.code) {
				this.$u.toast(res.msg);
				return;
			}
			if (this.is_update) {
				this.commentList = [];
				this.is_update = false;
			}
			this.commentList = [...this.commentList, ...res.data.data];
			this.has_more = res.data.current_page < res.data.last_page;
		},
		//文章点赞
		clickArticle() {
			if (this.detail.vote == 'up') {
				this.goVoteDelete(this.detail, 'article');
			} else {
				this.goVoteCreate(this.detail, 'article');
			}
		},
		goToComment() {
			uni.pageScrollTo({
				scrollTop: 9999999,
				duration: 10
			});
			this.$refs.faEditor.setData('');
		},
		//评论的操作条事件
		barClick(key, index, item) {
			switch (key) {
				case 0: //评论点赞或取消点赞
					if (item.vote == 'up') {
						this.goVoteDelete(item, 'comment');
					} else {
						this.goVoteCreate(item, 'comment');
					}
					break;
				case 1: //回复
					uni.pageScrollTo({
						scrollTop: 9999999,
						duration: 10
					});
					// #ifdef MP-WEIXIN || APP-PLUS || H5
					this.$refs.faEditor.setData('@' + item.user.nickname + '&nbsp;');
					// #endif
					// #ifdef MP-BAIDU || MP-ALIPAY
					this.$refs.faEditor.setData('@' + item.user.nickname + ' ');
					// #endif
					break;
				case 2: //举报
					this.jb_id = item.id;
					this.jb_type = 'comment';
					this.$refs.faReport.show();
					break;
				case 3: //更多
					this.remarkMoreData = item;
					this.remarkIndex = index;
					this.is_remark = true;
					break;
			}
		},
		remarkBar(index) {
			this.cancelRemark();
			switch (index) {
				case 0: //举报
					this.jb_id = this.remarkMoreData.id;
					this.jb_type = 'comment';
					this.$refs.faReport.show();
					break;
				case 1: //编辑
					// #ifdef MP-WEIXIN || APP-PLUS || H5
					this.edit_form = {
						content: this.remarkMoreData.content_fmt,
						id: this.remarkMoreData.id
					};
					// #endif
					// #ifdef MP-BAIDU || MP-ALIPAY
					this.edit_form = {
						content: this.remarkMoreData.content,
						id: this.remarkMoreData.id
					};
					// #endif
					this.ed_show = true;
					break;
				case 2: //删除
					this.delete_form = {
						id: this.remarkMoreData.id,
						type: 'comment'
					};
					this.content = '确认删除?';
					this.show = true;
					this.showCancel = true;
					this.back_text = '确定';
					break;
			}
		},
		cancelRemark() {
			this.is_remark = false;
		},
		//主操作条，就是文章的操作
		mainBar(index) {
			this.cancel();
			switch (index) {
				case 0: //分享
					// #ifdef H5
					this.$util.uniCopy({
						content: window.location.href,
						success: () => {
							this.$u.toast('复制成功，请去粘贴发送给好友吧');
						},
						error: () => {
							console.log('复制失败！');
						}
					});
					// #endif
					//#ifdef APP-PLUS
					this.$refs.faShare.show();
					// #endif
					break;
				case 1: //收藏或取消收藏
					if (this.detail.collected) {
						this.goCollectionDelete(this.detail, 'article');
					} else {
						this.goCollectionCreate(this.detail, 'article');
					}
					break;
				case 2: //感谢
					this.$refs.faThank.show();
					break;
				case 3: //举报
					this.jb_id = this.id;
					this.jb_type = 'article';
					this.$refs.faReport.show();
					break;
				case 4: //编辑
					this.$wanlshop.to(`/pages/community/article/post?id=${this.id}&type=update`)
					break;
				case 5: //删除
					this.delete_form = {
						id: this.id,
						type: 'article'
					};
					this.content = '确认删除?';
					this.show = true;
					this.showCancel = true;
					this.back_text = '确定';
					break;
				case 6: //更多
					this.getArticleConfig();
					break;
			}
		},
		//删除文章
		getArticleDelete: async function() {
			let res = await this.$api.getArticleDelete({
				id: this.id
			});
			this.$u.toast(res.msg);
		},
		//获取文章配置
		getArticleConfig: async function() {
			let res = await this.$api.getArticleConfig({
				id: this.id
			});
			if (!res.code) {
				this.$u.toast(res.msg);
				return;
			}
			if (res.data.article.style) {
				this.styleStr = res.data.article.style;
			}
			this.flag = res.data.article.flag;
			this.$refs.faMore.show();
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f4f6f8;
}

.detail {
	background: #ffffff;
	box-shadow: 0px 0px 3px 0px rgba(0, 78, 255, 0.1);
	.time {
		color: $u-light-color;
	}

	.title text {
		-webkit-background-clip: text;
	}
	.content_fmt {
		line-height: 45rpx;
	}
}

.answer {
	background: #ffffff;
	padding: 0 30rpx 30rpx 30rpx;
	box-shadow: 0px 0px 3px 0px rgba(0, 78, 255, 0.1);
	.answer-nav {
		padding: 30rpx 0rpx;

		.active {
			border-bottom: 2rpx solid #2979ff;
			color: #2979ff;
		}
	}
	.bar-item {
		padding: 5rpx 15rpx;
		border-radius: 5rpx;
		font-size: 20rpx;
	}
}

.comment {
	display: flex;
	padding: 30rpx 0rpx;

	.left {
		image {
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
			background-color: #f2f2f2;
		}
	}

	.right {
		flex: 1;
		padding-left: 20rpx;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10rpx;

			.create_date {
				display: flex;
				align-items: center;
				color: #9a9a9a;
				font-size: 26rpx;

				.time {
					margin-right: 4rpx;
					color: #9a9a9a;
				}
			}
		}

		.content {
			margin-bottom: 10rpx;
			line-height: 45rpx;
			word-break: break-word;
		}

		.bottom {
			margin-top: 20rpx;
			display: flex;
			font-size: 24rpx;
			color: #9a9a9a;
		}
	}
}
.sendMsg {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	.header {
		border-bottom: 1px solid #eee;
		background-color: #f8f8f8;
	}
}
</style>
